<template>
  <view class="my-device">
    <view class="my-device-content">
      <view class="my-device-content-item">
        <view class="device-img">
          <img
            src="https://img.alicdn.com/imgextra/i1/1034622205/O1CN018ePRr31S9wO8LxHWX_!!1034622205.png"
            alt=""
          />
        </view>
        <view class="my-device-list">
          <view
            class="my-device-list-item"
            v-for="item in deviceList"
            :key="item.id"
          >
            <view class="device-list-left">
              <view class="left-title">
                <i class="iconfont icon-shouji"></i>
                <text>{{ item.name }}</text>
              </view>
              <view class="left-time"
                ><text>绑定时间：{{ item.lastHeartbeat }}</text></view
              >
            </view>
            <view
              class="device-list-right"
              @click="handleDeltattendanceCheckDevice(item.id)"
            >
              <img
                src="https://img.alicdn.com/imgextra/i4/1034622205/O1CN01UpcvK91S9wO7QyHNN_!!1034622205.png"
                alt=""
              />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getCheckDeviceList, deltattendanceCheckDevice } from "@/api/index";
import Taro, { useRouter } from "@tarojs/taro";
const deviceList = ref([]);
const rouer = useRouter();
onMounted(() => {
  handleGetCheckDeviceList();
});
const handleGetCheckDeviceList = async () => {
  const res = await getCheckDeviceList({ userId: rouer.params.userId });
  deviceList.value = res.rows;
};
const handleDeltattendanceCheckDevice = async id => {
  const res = await deltattendanceCheckDevice(id);
  if (res.code == 200) {
    Taro.showToast({
      title: "删除成功",
      icon: "none",
    });
    handleGetCheckDeviceList();
  }
};
</script>

<style lang="less">
@import url("./index.less");
</style>
